<script setup>
import { getProjectListAll } from '@/api/project';
import MyTable from '@/components/MyTable.vue'
import { ref,onMounted } from 'vue';
const data = ref([])


// 得到项目信息
async function getProjectsInfo() {

  const res = await getProjectListAll()

  data.value = res

  data.value.forEach((item) => {

    item.totalPrice = item.contractHours * item.hourlyRate
    item.remainingHours = item.contractHours - item.alreadySpendTime
    item.remainingCost = item.remainingHours * item.hourlyRate
  })
}

onMounted(async () => {
  await getProjectsInfo();
});
const labels = ref([
  {key:'项目号',value:'projectId'},
  {key:'模块',value:'systemName'},
  {key:'公司名称简写',value:'groupName'},
  {key:'时间',value:'contractHours'},
  {key:'单价',value:'hourlyRate'},
  {key:'总价',value:'totalPrice'},
  {key:'已用',value:'alreadySpendTime'},
  {key:'剩余',value:'remainingHours'},
  {key:'剩余可开票金额',value:'remainingCost'}
])
</script>

<template>
  <div class="ps-container">
    <div class="title">
      <h3>项目统计报表</h3>
    </div>
    <MyTable :data="data" :labels="labels"  :op="false" :select="false" :paging="false" ></MyTable>

  </div>
</template>

<style lang="less" scoped>
.ps-container {
  background-color: #fff;
  padding: 20px;
  h3 {
    font-weight: normal;
  }
  .title {
    margin-bottom: 20px;
  }
}
</style>
